<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.div1 {
	/* border: 2px white solid; */
	width: 300px;
	height: 300px;
	margin: 200px auto;
	border-radius: 50%;
	animation: che 5s infinite linear;
	box-shadow: 0px 0px 1000px red;
	
}

.div2 {
	width: 150px;
	height: 300px;
	border-top-left-radius: 150px;
	border-bottom-left-radius: 150px;
	background-color: black;
	position: absolute;
}

.div3 {
	width: 150px;
	height: 300px;
	/* border: 2px white solid; */
	/*  float: right;
	margin-top: -304px;*/
	border-top-right-radius: 150px;
	border-bottom-right-radius: 150px;
	background-color: skyblue;
	margin-left: -1px;
	position: absolute;
	margin-left: 150px;
}

.div4 {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: black;
	/* border: 2px black solid; */
	margin: 0 auto;
	position: absolute;
	margin-left: 75px;
}

.div5 {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: skyblue;
	/* border: 2px black solid; */
	margin-left: 75px;
	margin-top: 150px;
	position: absolute;
}

.div6 {
	width: 30px;
	height: 30px;
	background-color: skyblue;
	position: absolute;
	border-radius: 50%;
	margin-left: 60px;
	margin-top: 60px;
}

.div7 {
	width: 30px;
	height: 30px;
	background-color: black;
	position: absolute;
	border-radius: 50%;
	position: absolute;
	margin-left: 60px;
	margin-top: 60px;
}


@keyframes che {
	from {transform: rotate(0);
}

to {
	transform: rotate(360deg);
}
}
</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4">
			<div class="div6"></div>
		</div>
		<div class="div5">
			<div class="div7"></div>
		</div>
	</div>
</body>
</html>